import React, { useState } from 'react';
import bgImage from '@/assets/p2/background.png'; // 假设你的背景图在assets目录下
import tp1 from '@/assets/p2/tianping1.png'
import tp2 from '@/assets/p2/tianping2.png'
import tp3 from '@/assets/p2/tianping3.png'
import fama from '@/assets/p2/fama.png'
import item1 from '@/assets/p2/item1.png'
import item2 from '@/assets/p2/item2.png'
import item3 from '@/assets/p2/item3.png'
import '@/pages/p2/tianping.css'; // 你的样式文件
import '@/pages/p2/gamepage.css'
import Card from "@/components/Card";
import { history } from 'umi';

const tianping = () => {
    const [left, setLeft] = useState(0); //天平左侧总重量
    const [right, setRight] = useState(0); //天平右侧总重量

    const [isItem, setIsItem] = useState(false); //左侧是否已经有物体
    const [isPanduan, setIsPanduan] = useState(false); //是否已经开始测量

    const [pingheng, setPingheng] = useState(true); //天平处于平衡状态为true
    const [zuo, setZuo] = useState(false); //左侧重为true
    const [you, setYou] = useState(false); //右侧重为true

    const [offsetleft1, setOffsetLeft1] = useState(10); //一斗砝码定位左
    const [offsettop1, setOffsetTop1] = useState(0); //一斗砝码定位上

    const [offsetleft2, setOffsetLeft2] = useState(5); //二斗砝码定位左
    const [offsettop2, setOffsetTop2] = useState(80); //二斗砝码定位上

    const [offsetleft3, setOffsetLeft3] = useState(0); //五斗砝码定位左
    const [offsettop3, setOffsetTop3] = useState(160); //五斗砝码定位上

    const [offsetleft4, setOffsetLeft4] = useState(0); //胡萝卜定位左
    const [offsettop4, setOffsetTop4] = useState(250); //胡萝卜定位上

    const [offsetleft5, setOffsetLeft5] = useState(0); //麦子定位左
    const [offsettop5, setOffsetTop5] = useState(330); //麦子定位上

    const [offsetleft6, setOffsetLeft6] = useState(0); //葡萄定位左
    const [offsettop6, setOffsetTop6] = useState(410); //葡萄定位上

    const yidong1 = () => {
        if(!isPanduan){
            setRight(right+1);
            setOffsetLeft1(-230);
            setOffsetTop1(90);
        }
    }
    const yidong2 = () => {
        if(!isPanduan){
            setRight(right+2);
            setOffsetLeft2(-195);
            setOffsetTop2(80);
        }
    }
    const yidong3 = () => {
        if(!isPanduan){
            setRight(right+5);
            setOffsetLeft3(-155);
            setOffsetTop3(70);
        }
    }
    const yidong4 = () => {
        if(!isItem){
            setLeft(3);
            setOffsetLeft4(-430);
            setOffsetTop4(80);
            setIsItem(true);
        }
    }
    const yidong5 = () => {
        if(!isItem){
            setLeft(5);
            setOffsetLeft5(-430);
            setOffsetTop5(80);
            setIsItem(true);
        }
    }
    const yidong6 = () => {
        if(!isItem){
            setLeft(7);
            setOffsetLeft6(-430);
            setOffsetTop6(80);
            setIsItem(true);
        }
    }
    const panduan = () => {
        if(left > right){
            setPingheng(false);
            setZuo(true);
            setYou(false);
            if(offsetleft1 == -230){
                setOffsetTop1(30);
            }
            if(offsetleft2 == -195){
                setOffsetTop2(20);
            }
            if(offsetleft3 == -155){
                setOffsetTop3(10);
            }
            if(offsetleft4 == -430){
                setOffsetTop4(140);
            }
            if(offsetleft5 == -430){
                setOffsetTop5(140);
            }
            if(offsetleft6 == -430){
                setOffsetTop6(140);
            }
        }else if(left < right){
            setPingheng(false);
            setZuo(false);
            setYou(true);
            if(offsetleft1 == -230){
                setOffsetTop1(150);
            }
            if(offsetleft2 == -195){
                setOffsetTop2(140);
            }
            if(offsetleft3 == -155){
                setOffsetTop3(130);
            }
            if(offsetleft4 == -430){
                setOffsetTop4(20);
            }
            if(offsetleft5 == -430){
                setOffsetTop5(20);
            }
            if(offsetleft6 == -430){
                setOffsetTop6(20);
            }
        }else{
            setPingheng(true);
            setZuo(false);
            setYou(false);
        }
        setIsPanduan(true);
    }
    const huifu = () => {
        setLeft(0);
        setRight(0);
        setIsItem(false);
        setIsPanduan(false);
        setPingheng(true);
        setZuo(false);
        setYou(false);
        setOffsetLeft1(10);
        setOffsetTop1(0);
        setOffsetLeft2(5);
        setOffsetTop2(80);
        setOffsetLeft3(0);
        setOffsetTop3(160);
        setOffsetLeft4(0);
        setOffsetTop4(250);
        setOffsetLeft5(0);
        setOffsetTop5(330);
        setOffsetLeft6(0);
        setOffsetTop6(410);
    }

    const [isSuccess, setIsSuccess] = useState(false);
    const [num1, setNum1] = useState(0);
    const [num2, setNum2] = useState(0);
    const [num3, setNum3] = useState(0);
    const handleInputChange1 = (event:React.ChangeEvent<HTMLInputElement> ) => {  
        setNum1(parseInt(event.target.value)); // 更新状态变量inputValue  
    };
    const handleInputChange2 = (event:React.ChangeEvent<HTMLInputElement> ) => {  
        setNum2(parseInt(event.target.value));   
    };
    const handleInputChange3 = (event:React.ChangeEvent<HTMLInputElement> ) => {  
        setNum3(parseInt(event.target.value)); 
    };
    const queren = () =>{
        if(num1 == 3 && num2 == 5 && num3 == 7){
            setIsSuccess(true);
        }
    }

    return(
        <div className="game-page" style={{ backgroundImage: `url(${bgImage})` }}>
            <div className='bg' style={{display : isSuccess ? 'none' : 'block'}}>
                <h1>根据天平的平衡算出各类物品的重量</h1>
                <img src={tp1} className="tianping1" style={{display: zuo ? 'block' : 'none'}}/>
                <img src={tp2} className="tianping2" style={{display: pingheng ? 'block' : 'none'}}/>
                <img src={tp3} className="tianping3" style={{display: you ? 'block' : 'none'}}/>
                <ul className='items'>
                    <li>
                        <img onClick={yidong1} src={fama} id='fama1'
                        style={{ left: `${offsetleft1}px`, top: `${offsettop1}px` }}/>
                        <br />一斗
                    </li>
                    <li>
                        <img onClick={yidong2} src={fama} id='fama2'
                        style={{ left: `${offsetleft2}px`, top: `${offsettop2}px` }}/>
                        <br />二斗
                    </li>
                    <li>
                        <img onClick={yidong3} src={fama} id='fama3'
                        style={{ left: `${offsetleft3}px`, top: `${offsettop3}px` }}/>
                        <br />五斗
                    </li>
                    <li>
                        <img onClick={yidong4} src={item1} id='huluobo'
                        style={{ left: `${offsetleft4}px`, top: `${offsettop4}px` }}/>
                        胡萝卜<br />&nbsp;&nbsp;
                        <input type="number" value={num1} onChange={handleInputChange1} />斗
                    </li>
                    <li>
                        <img onClick={yidong5} src={item2} id='maizi' 
                        style={{ left: `${offsetleft5}px`, top: `${offsettop5}px` }}/>
                        麦子<br />&nbsp;&nbsp;
                        <input type="number" value={num2} onChange={handleInputChange2}/>斗
                    </li>
                    <li>
                        <img onClick={yidong6} src={item3} id='putao' 
                        style={{ left: `${offsetleft6}px`, top: `${offsettop6}px` }}/>
                        葡萄<br />&nbsp;&nbsp;
                        <input type="number" value={num3} onChange={handleInputChange3}/>斗
                    </li>
                </ul>
                <button id='b1' onClick={panduan}>称 重</button>
                <button id='b2' onClick={huifu}>清 空</button>
                <button id='b3' onClick={queren}>确 认</button>
            </div>
            <Card
					onClick={() => {
                        history.push('/p2/yingbuzu');
					}}
					visible={isSuccess}
					cardId={5}
				>
					<p>获得成就</p>
					<p>粟米</p>
			</Card>
        </div>
    );
}

export default tianping;